<div style="POSITION: relative" id="content">
<h3>使用jQuery easyUI 创建一个 RSS Feed阅读器</h3>
<div id="article_content" class="article_content">
  <p>在这个教程中我们要去创建一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">rss阅读器使用easyUI框架.</span></p>
  <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344395808_7846.jpg" alt=""><br>
    </span></p>
  <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">我们将使用以下插件:</span></p>
  <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></p>
  <ul style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
    <li>layout:创建一个应用程序界面.</li>
    <li>datagrid: 显示rss feed列表.</li>
    <li>tree:显示feed频道.</li>
  </ul>
  <p></p>
  <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤1: 创建 Layout</h4>
  <pre name="code" class="html">&lt;body class=&quot;easyui-layout&quot;&gt;  
    &lt;div region=&quot;north&quot; border=&quot;false&quot; class=&quot;rtitle&quot;&gt;  
        jQuery EasyUI RSS Reader Demo  
    &lt;/div&gt;  
    &lt;div region=&quot;west&quot; title=&quot;Channels Tree&quot; split=&quot;true&quot; border=&quot;false&quot; style=&quot;width:200px;background:#EAFDFF;&quot;&gt;  
        &lt;ul id=&quot;t-channels&quot; url=&quot;data/channels.json&quot;&gt;&lt;/ul&gt;  
    &lt;/div&gt;  
    &lt;div region=&quot;center&quot; border=&quot;false&quot;&gt;  
        &lt;div class=&quot;easyui-layout&quot; fit=&quot;true&quot;&gt;  
            &lt;div region=&quot;north&quot; split=&quot;true&quot; border=&quot;false&quot; style=&quot;height:200px&quot;&gt;  
                &lt;table id=&quot;dg&quot;   
                        url=&quot;get_feed.php&quot; border=&quot;false&quot; rownumbers=&quot;true&quot;  
                        fit=&quot;true&quot; fitColumns=&quot;true&quot; singleSelect=&quot;true&quot;&gt;  
                    &lt;thead&gt;  
                        &lt;tr&gt;  
                            &lt;th field=&quot;title&quot; width=&quot;100&quot;&gt;Title&lt;/th&gt;  
                            &lt;th field=&quot;description&quot; width=&quot;200&quot;&gt;Description&lt;/th&gt;  
                            &lt;th field=&quot;pubdate&quot; width=&quot;80&quot;&gt;Publish Date&lt;/th&gt;  
                        &lt;/tr&gt;  
                    &lt;/thead&gt;  
                &lt;/table&gt;  
            &lt;/div&gt;  
            &lt;div region=&quot;center&quot; border=&quot;false&quot; style=&quot;overflow:hidden&quot;&gt;  
                &lt;iframe id=&quot;cc&quot; scrolling=&quot;auto&quot; frameborder=&quot;0&quot; style=&quot;width:100%;height:100%&quot;&gt;&lt;/iframe&gt;  
            &lt;/div&gt;  
        &lt;/div&gt;  
    &lt;/div&gt;  
&lt;/body&gt; </pre>
  <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤 2:datagrid处理事件</h4>
  在这里我们要处理一些由用户触发的事件.
  <p></p>
  <p>
  <pre name="code" class="javascript">$('#dg').datagrid({  
    onSelect: function(index,row){  
        $('#cc').attr('src', row.link);  
    },  
    onLoadSuccess:function(){  
        var rows = $(this).datagrid('getRows');  
        if (rows.length){  
            $(this).datagrid('selectRow',0);  
        }  
    }  
});  </pre>
  这个示例使用了'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">onSelect</span>'事件显示<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">feed 的内容和'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">onLoadSuccess</span>'事件选择第一行.</span>
  </p>
  <p></p>
  <div style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"></span></span>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤3:处理tree事件</h4>
    当tree数据已经加载,我们需要去选择第一个叶子节点,调用'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">select</span>'方法去选择那个节点,使用'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">onSelect</span>'事件去得到选择节点,所以我们能得到对应的'url'&#20540;</div>
  <div style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px">最终我们调用<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid 的</span>'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">load'方法去刷新<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">feed
    列表数据.</span></span></span></span></div>
  <div style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span></span>
    <pre name="code" class="javascript">$('#t-channels').tree({  
    onSelect: function(node){  
        var url = node.attributes.url;  
        $('#dg').datagrid('load',{  
            url: url  
        });  
    },  
    onLoadSuccess:function(node,data){  
        if (data.length){  
            var id = data[0].children[0].children[0].id;  
            var n = $(this).tree('find', id);  
            $(this).tree('select', n.target);  
        }  
    }  
});  </pre>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI 示例:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/app/rssreader/downloads/easyui-rssreader-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-rssreader-demo.zip</a></div>

  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>